<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<div>
				<el-input v-model="projectName" class="zs-select-md zs-space-right-sm" placeholder=" " disabled />
				<el-select v-model="queryParams.biBuildName" class="zs-select-md zs-space-right-sm" placeholder="楼栋" @change="queryList" clearable filterable>
					<el-option v-for="item in buildingList" :key="item.buildingName" :label="item.buildingName" :value="item.buildingName" />
				</el-select>
				<el-input v-model="queryParams.biHouseNu" class="zs-select-md zs-space-right-sm" placeholder="房间编号" @blur="queryList" clearable />
				<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
					<template #reference>
						<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': queryParams.biFlag }">
							<el-icon>
								<MoreFilled />
							</el-icon>
						</el-button>
					</template>
					<template #default>
						<el-select v-model="queryParams.biFlag" class="zs-select-md zs-space-right-sm" placeholder="是否匹配" @change="queryList" clearable :teleported="false">
							<el-option label="匹配" value="1" />
							<el-option label="不匹配" value="0" />
						</el-select>
					</template>
				</el-popover>
				<el-button class="zs-btn-plain" @click="queryList"> 查询 </el-button>
			</div>
			<div>
				<el-button class="zs-btn-md zs-btn-primary" @click="verifyFn('all')">立即校验</el-button>
			</div>
		</div>

		<!-- teble -->
		<div class="zs-card zs-table-page-content">
			<el-table class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe>
				<el-table-column type="index" label="序号" width="60" align="center" :index="index => index + 1 + (tableData.currentPage - 1) * curPageSize" />
				<el-table-column prop="biCommunityName" label="区域" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="biBuildName" label="楼栋" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="biHouseNu" label="房间" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="biBuildFlagTxt" label="楼栋比对" align="center" :formatter="defaultTableData" />
				<el-table-column prop="biUnitFlagTxt" label="单元比对" align="center" :formatter="defaultTableData" />
				<el-table-column prop="" label="操作" width="90" align="center">
					<template #default="{ row }">
						<el-button class="zs-link" link size="small" @click="verifyFn('single', row)">校验</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="pageChange('size', $event)" @current-change="pageChange('page', $event)" />
			</div>
		</div>
	</div>
</template>

<script setup>
	import { residenceDataSyncListApi, getBuildingListApi, residenceDataSyncVerifyApi, residenceDataSyncAllVerifyApi } from '@/api/residence.js';
	import { ref, reactive } from 'vue';
	import { useStore } from 'vuex';
	import { useRoute } from 'vue-router';
	import { defaultTableData } from '@/utils/publicUtils';
	import { ElMessage } from 'element-plus';

	const route = useRoute();
	const store = useStore();
	const curPageSizes = ref(store.state.uiPageSizes);
	const curPageSize = ref(store.state.uiPageSizeDefault);
	const projectName = ref(decodeURI(route.query.projectName || ''));

	// 列表 filed
	const tableData = reactive({
		currentPage: 1,
		total: 0,
		loading: false,
		data: [],
	});

	//查询条件
	const queryParams = reactive({ projectCode: route.query.projectCode, pageNumber: 1, pageSize: curPageSize.value });

	// 列表数据源
	const queryList = async () => {
		tableData.loading = true;
		let res = await residenceDataSyncListApi(queryParams);
		if (res.data.code !== 200) return;
		initData(res.data.data.list);
		tableData.data = res.data.data.list || [];
		tableData.total = res.data.data.total || 0;
		tableData.loading = false;
	};

	const initData = list => {
		list.forEach(item => {
			item.biBuildFlagTxt = item.biBuildFlag == 1 ? '一致' : '不一致';
			item.biUnitFlagTxt = item.biUnitFlag == 1 ? '一致' : '不一致';
		});
	};

	//楼栋
	const buildingList = ref([]);
	const getBuildingList = async () => {
		let res = await getBuildingListApi({ projectCodes: [route.query.projectCode], isPage: false, isNew: true });
		if (res.data.code !== 200) return;
		buildingList.value = res.data.data.list || [];
	};

	//校验
	const verifyFn = async (type, row) => {
		let apiName = type == 'all' ? residenceDataSyncAllVerifyApi : residenceDataSyncVerifyApi;
		let res = await apiName({ projectCode: route.query.projectCode, biHouseId: row?.biHouseId});
		if (res.data.code == 200) {
			ElMessage({ message: '校验成功', type: 'success' });
			queryList();
		}
	};

	// 分页
	const pageChange = (type, size) => {
		if (type == 'size') {
			queryParams.pageSize = size;
		} else {
			queryParams.pageNumber = size;
		}
		queryList();
	};

	getBuildingList();
	queryList();
</script>
